<template>
    <div class="refund">
        <el-form :model="form" status-icon ref="ruleForm" label-position="top">
            <el-form-item :label="$t('mall.退款商品')">
                <div class="shop_deta">
                    <img :src="cover" alt="" class="cover">
                    <div class="info">
                        <div class="name">{{ orderInfo.goods_name }}</div>
                        <div class="other">
                            <div class="price">￥{{ orderInfo.order_amount }}</div>
                            <div class="number">×{{ orderInfo.quantity }}</div>
                        </div>
                    </div>
                </div>
            </el-form-item>

            <el-form-item :label="$t('mall.服务状态')">
                <el-select v-model="form.service">
                    <el-option :label="item.name" v-for="item in serviceList" :key="item.value"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item :label="$t('mall.退款原因')">
                <el-select v-model="form.reason">
                    <el-option :label="item.name" v-for="item in reasonList" :key="item.value"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>



            <el-form-item :label="$t('mall.退款金额')" prop="value">
                <el-input v-model="form.value" :placeholder="placeholder">
                    <template slot="suffix">
                        <div class="max_value">￥{{ orderInfo.pay_amount }}</div>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item :label="$t('mall.补充描述和说明')">
                <el-input type="textarea" v-model="form.desc"></el-input>
            </el-form-item>



            <el-form-item>
                <div class="footer">
                    <el-button type="primary" @click="submit">{{ $t('mall.立即申请') }}</el-button>
                    <el-button type="primary" plain @click="$emit('close')">{{ $t('mall.取消') }}</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    props: {
        order_sn: {
            type: [String, Number],
            default: ""
        },
        type: String
    },
    data() {

        return {
            cover: "",
            orderInfo: {},
            placeholder: '',

            serviceList: [
                { name: this.$t('mall.未收货'), value: 0 },
                { name: this.$t('mall.已收货'), value: 1 }
            ],
            reasonList: [
                { name: this.$t('mall.与商家协商一致'), value: 0 },
                { name: this.$t('mall.商品与描述不符'), value: 1 },
                { name: this.$t('mall.不想要了'), value: 2 }
            ],

            form: {
                service: 0,
                reason: 0,

                value: "",
                desc: ""
            }
        };
    },
    watch: {
        order_sn: {
            handler(value) {
                this.getDeta(value);
            },
            immediate: true
        }
    },
    mounted() { },
    methods: {
        async getDeta(order_sn) {
            let { order } = await this.$api.shopApi.orderDetail({
                order_sn
            });
            this.orderInfo = order;
            this.cover = order.goods_images[0] || '';
            this.placeholder = `${this.$t('mall.最多退')}¥${order.pay_amount}，${this.$t('mall.可修改')}`;
        },
        async submit() {
            let refund_amount = this.form.value;
            let refund_reason = this.reasonList[this.form.reason].name;
            let refund_desc = this.form.desc;
            let data = {
                order_id: this.orderInfo.id,
                goods_id: this.orderInfo.goods_id,

                refund_amount,
                refund_reason,
                refund_desc,
                refund_images: ''
            };

            await this.$api.shopApi.applyRefund(data);
            this.$message({
                type: "success",
                message: this.$t('msg.操作成功')
            });
            this.$emit('ok')

        }
    }
};
</script>

<style lang="scss" scoped>
.refund {
    &:deep(.el-select) {
        width: 100%;
    }

    &:deep(.el-input__inner) {
        height: 52px;
        background: #F5F5F5;
    }

    &:deep(.el-textarea__inner) {
        height: 104px;
        background: #F5F5F5;
    }

    .max_value {
        height: 100%;
        font-size: 16px;
        color: #FF4140;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .footer {
        .el-button {
            width: 118px;
            height: 32px;
        }
    }
}

.shop_deta {
    background: #F5F5F5;
    border-radius: 8px 8px 8px 8px;
    padding: 12px 16px;
    box-sizing: border-box;
    display: flex;

    .cover {
        width: 80px;
        height: 80px;
        border-radius: 8px;
    }

    .info {
        flex: 1;
        padding-left: 8px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .name {
            font-weight: 500;
            font-size: 16px;
            color: #333333;
        }

        .other {
            display: flex;
            justify-content: space-between;

            .price {
                font-weight: bold;
                font-size: 18px;
                color: #F5222D;
            }

            .number {
                font-size: 16px;
                color: #333333;
            }
        }
    }
}
</style>